body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 1.25rem; /* 20px */
  background: #f5f5f5;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

nav {
  display: flex;
  gap: 0.5rem; /* 8px */
  overflow-x: auto;
  scrollbar-width: none;

  & > a {
    background: #e0e0e0;
    padding: 0.5rem 1rem; /* 8px 16px */
    border-radius: 0.25rem; /* 4px */
    cursor: pointer;
    text-decoration: none;
    color: black;
    text-wrap: nowrap;

    &.active {
      background: #ff6900;
      color: white;
    }
  }
}

section {
  background: white;
  padding: 1.25rem; /* 20px */
  border-radius: 0.5rem; /* 8px */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* 0 2px 4px */
  margin-bottom: 1.25rem; /* 20px */

  & > div:has(> div:nth-of-type(2)):not(:has(> div:nth-of-type(3))) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
    gap: 1rem;

    & > :first-child {
      grid-column: span 2;
    }
    & > :nth-child(2) {
      grid-column: span 1;
    }
  }

  & > div:has(> div:nth-of-type(3)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); /* 300px */
    gap: 1rem; /* 16px */
  }
}

h1,
h2,
h3,
h4 {
  margin-top: 0.75rem; /* 12px */
}

h2 {
  margin-top: 0;
}

button {
  background: #ff6900;
  color: white;
  border: none;
  padding: 0.5rem 1rem; /* 8px 16px */
  border-radius: 0.25rem; /* 4px */
  cursor: pointer;

  &:hover {
    background: #e65c00;
  }
}

.loading {
  margin-block: 1.25rem; /* 20px */
  color: #666;
  font-style: italic;
}

.error {
  color: #d32f2f;
  padding: 0.75rem; /* 12px */
  background: #ffebee;
  border-radius: 0.25rem; /* 4px */
}

dl {
  background: #f5f5f5;
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.5rem 0.75rem; /* 8px 12px */
  align-items: start;
  padding: 0.75rem; /* 12px */
  border-radius: 0.25rem; /* 4px */
  margin: 0.625rem 0; /* 10px 0 */

  & dt {
    font-weight: 600;
  }

  & dd {
    margin: 0;
  }
}
